<template>
  <div class="div">
    <div class="top">
      <div class="top1">
        <p>搜索</p>
        <el-input
          placeholder="请输入姓名/联系人"
          v-model="query.name"
          size="large"
          type="text"
          autocomplete="off"
        />
      </div>
      <div class="ren">
        <span>人员类型</span>

        <el-select
          clearable
          v-model="query.type"
          class="m-2"
          placeholder="---请选择---"
          size="large"
        >
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="ren">
        <span>所属承建商</span>
        <el-select
          clearable
          v-model="query.contractor"
          class="m-2"
          placeholder="---请选择---"
          size="large"
        >
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="ren">
        <span>所属班组</span>
        <el-select
          clearable
          v-model="query.class"
          class="m-2"
          placeholder="---请选择---"
          size="large"
        >
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <el-button type="primary" plain class="sou" @click="sobtn">搜索</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" height="250" style="width: 100%">
        <el-table-column prop="id" label="序号" />
        <el-table-column prop="name" label="人员姓名" />
        <el-table-column prop="phone" label="联系手机" />
        <el-table-column prop="type" label="人员类型" />
        <el-table-column prop="contractor" label="所属承建商" />
        <el-table-column prop="class" label="所属班组" />
      </el-table>
    </div>

    <el-button type="info" @click="Shut">关闭</el-button>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import service from '../../../utils/service'
import { ElTable } from "element-plus";
import { useRouter } from "vue-router";
const $router = useRouter();

const options2 = reactive<any[]>([]);
const options3 = reactive<any[]>([]);
const options1 = reactive<any[]>([]);

const value = ref("");

interface Ilist {
  id: number;
  nmae: string;
  phone: string;
  contractor: string;
  groups: string;
  type: string;
  class:string
}
const tableData = reactive<Ilist[]>([]);

const changlist = () => {
  service({
    url: "/peoples",
  }).then((res) => {
    tableData.push(...res.data);
  });
};
changlist();
//下拉框数据
const changla1 = () => {
  service({
    url: "/Contractor",
  }).then((res) => {
    options3.push(...res.data);
  });
};
changla1();
const changla2 = () => {
  service({
    url: "/Personneltype",
  }).then((res) => {
    options2.push(...res.data);
  });
};
changla2();
const changla3 = () => {
  service({
    url: "/class",
  }).then((res) => {
    options1.push(...res.data);
  });
};
changla3();
//搜索
const query = reactive<{
  name?: string;
 type?:string;
 contractor?:string,
 class?:string

}>({
  name: "",
  type:"",
  contractor:"",
  class:""
  
});
const sobtn=()=>{
  service({
    url: "http://localhost:3000/peoples",
    method:"get",
    params:{
      name:query.name,
      type:query.type,
      contractor:query.contractor,
      class:query.class
    }
  }).then((res=>{
    tableData.length=0
    tableData.push(...res.data)
  }))

}


const Shut = () => {
  $router.push("/kao");
};
</script>

<style scoped>
.top {
  display: flex;
  justify-content: space-evenly;
}
.top .top1 .el-input {
  margin-left: 39px;
  margin-top: -61px;
}
</style>